<template>
  <div class="card-detail-container">
    <div v-if="info">
      <div class="card-container">
        <div class="card-region card1"
             v-show="cardShow==1"
             :class="!info.cover?'defalut-bg':''"
             :style="cardStyle">
          <!-- <div class="card-region card1"
             v-show="cardShow==1"
             :class="info.cover?'defalut-bg':''"> -->
          <div class="card-header">
            <div class="shop-name clearfix">
              <div class="logo-box"
                   v-if="info.is_show_logo==1">
                <span class="shop-logo"
                      v-if="shop_info.avatar"
                      :style="{backgroundImage:'url('+shop_info.avatar+')'}"></span>
                <span class="shop-logo bg-qb"
                      v-else></span>
              </div>
              <div class="shop-name-info">
                <span class="shop-title"
                      v-if="info.is_show_shopname==1">{{shop_info.title}}</span>
                <span class="member-id">
                  用户ID：{{pid}}
                </span>
                <!-- <span class="member-date"
                      v-if="info.member_card_id">
                  有效期：<span v-if="info.limit_msg">{{info.limit_msg}}</span><span v-else>{{info.end_time}}</span>
                </span>
                <span class="member-date"
                      v-else>已过期</span> -->
              </div>
              <!-- 效果同点击会员凭证 -->
              <div class="qr-code js-show-code"
                  v-if="info.user_id"
                  @click="clickShowCert"></div>
            </div>
          </div>
          <span class="member-type"
                v-if="info.is_show_username==1">{{info.rank}}</span>
          <div class="member-type-box fontGilroy">
            <h2 class="card-number">{{info.card_no}}</h2>
          </div>
          <div class="card-content"
               @click="clickViewPrivilege">
            <span class="see-state">查看{{info.rank}}特权</span>
            <span>></span>
          </div>
        </div>
        <!--会员卡背面-->
        <div class="card-region card2"
             v-show="cardShow==2">
          <div class="myteq"
               @click="clickClosePrivilege">
            <span>我的特权</span>
            <span class="backBtn">
              <img src="https://img.wifenxiao.com/h5-wfx/images/user/card/back.png"
                   alt="">
              返回</span>
          </div>
          <div class="membership">
            <p class="item-name discount"
               v-if="info.discount">
              <span class="discount-num">{{info.discount}}</span>
              <span class="txt">折</span>
            </p>
            <p class="usr_card">会员卡</p>
          </div>
        </div>
      </div>

      <div class="user-area fontGilroy">
        <h3>
          <img src="https://img.wifenxiao.com/h5-wfx/images/user/card/icon_1.png"
               alt="">
          卡片信息：
          <span>{{user.nickname}}</span>
        </h3>
        <h3>
          <img src="https://img.wifenxiao.com/h5-wfx/images/user/card/icon_2.png"
               alt="">
          联系方式：
          <span>{{user.mobile || ''}}</span>
        </h3>
        <h3>
          <img src="https://img.wifenxiao.com/h5-wfx/images/user/card/icon_3.png"
               alt="">
          注册时间：
          <span>{{user.create_time}}</span>
        </h3>
        <h3 v-if="info.member_card_id">
          <img src="https://img.wifenxiao.com/h5-wfx/images/user/card/icon_4.png"
               alt="">
          有效期：
          <span v-if="info.limit_msg">{{info.limit_msg}}</span>
          <span v-else>{{info.end_time}}</span>
        </h3>
        <h3 v-else>
          <img src="https://img.wifenxiao.com/h5-wfx/images/user/card/icon_4.png"
               alt="">
          有效期：
          <span>已过期</span>
        </h3>

      </div>
      <div class="detail-block">
        <a href="javascript:;"
           class="block-item"
           :class="showUserDesc?'active':''"
           @click="clickUserDesc">
          <p class="arrow-right">
            <span class="icon icon-description"></span>
            <span>使用须知</span>
            <i class="icon-right" v-if="info.description"></i>
          </p>
          <p class="user-desc"
             v-show="showUserDesc">{{info.description}}</p>
        </a>
        <a class="block-item"
           @click="makePhone(info.customer_phone)">
          <span class="icon icon-tel"></span>
          <span>客服电话</span>
          <i class="icon-right" v-if="info.customer_phone"></i>
        </a>
        <a href="javascript:;"
           class="block-item js-show-code"
           v-if="info.user_id"
           @click="clickShowCert">
          <span class="icon icon-cert"></span>
          <span>会员凭证</span>
          <i class="icon-right"></i>
        </a>
        <a class="block-item"
           :href="'javascript:'"
           @click="onViewRecordClick"
           v-if="info.is_buy_log==1">
          <span class="icon icon-record"></span>
          <span>购买记录</span>
          <span class="record-status" v-if="info.is_refund==2">退款中</span>
          <i class="icon-right"></i>
        </a>
      </div>
      <div class="btn-group"
           v-if="info.user_id">
        <a href="javascript:;"
           class="btn-item btn-warning"
           v-if="info.status==0"
           @click="Jump('receiveCard')">
          <!-- <i class="user"></i> -->
          立即激活会员卡
        </a>
        <a class="btn-item gold-gra-btn"
           href="javascript:;"
           v-if="info.card_id && is_wx==1 && info.is_card!=1"
           @click="clickScanQrcodeCard">
          <!-- <i class="wx"></i> -->
          领取微信会员卡
        </a>
        <a href="javascript:;"
           class="btn-item gold-border-btn"
           v-if="info.is_refund==1"
           @click="onViewRefundClick" style="color:#DEAD6F;">
          退款
        </a>
        <a class="btn-item red-gra-btn"
           href="javascript:;"
           @click="clickDelCard"
           v-else-if="info.is_refund!=2">
          <!-- <i class="user"></i> -->
          删除会员卡
        </a>
      </div>
      <div class="btn-group"
           v-else>
        <a href="javascript:;"
           class="btn-item gold-gra-btn"
           @click="Jump('receiveCard')">
          <!-- <i class="user"></i> -->
          领取会员卡
        </a>
      </div>
      <!--会员凭证弹层-->
      <van-popup v-model="showCert"
                 class="tc-content">
        <div class="tc-top">
          <div class="tc-header clearfix">
            <h3 class="tc-title">
              <span v-if="shop_info.avatar"
                    class="header-img fl"
                    :style="{backgroundImage:'url('+shop_info.avatar+')'}"></span>
              <span v-else
                    class="header-img bg-qb fl"></span>

              <div class="rank-box">
                <span class="rank-title">{{shop_info.title}}</span>
                <span class="rank-level">{{info.rank}}</span>
              </div>
            </h3>
            <div class="tc-discount clearfix">
              <h4 v-if="info.discount"
                  class="fontGilroy">
                {{info.discount}}
                <span>折</span>
              </h4>
            </div>
            <button class="del-btn js-del-btn"
                    @click="clickCloseCert">×</button>
          </div>
        </div>
        <div class="tc-imgBox">
          <!--二维码-->
          <div class="qrcode">
            <img :src="qrcode"
                 alt="" />
          </div>
          <!--条形码-->
          <div class="txcode">
            <img :src="txcode"
                 alt="" />
          </div>
          <!--有效期-->
          <div class="qrData">
            <p v-if="info.limit_msg">有效期：{{info.limit_msg}}</p>
            <p v-else>
              有效期：
              <span></span>至
              <span>{{info.end_time}}</span>
            </p>
          </div>
        </div>
        <div class="tc-bottom">可截图保存至相册</div>
      </van-popup>

      <!--微信会员卡二维码-->
      <van-popup v-model="showWxcodeImg"
                 class="wxcode-content">
        <div class="wxcode-img">
          <img :src=wxcodeImg
               alt />
        </div>
      </van-popup>

    </div>
    <div v-else>
      <div class="emptyCard">
        <div class="receive_top">
          <span v-if="info.is_show_logo==1">
            <span v-if="shop_info.avatar"
                  class="receive_img"
                  :style="{backgroundImage:'url('+shop_info.avatar+')'}"></span>
            <span v-else
                  class="receive_img bg-qb"></span>
          </span>

          <span v-if="info.is_show_shopname==1">{{shop_info.title}}</span>
        </div>
        <img src="https://img.wifenxiao.com/h5-wfx/images/user/card/empty_card.png" />
        <p>没有对应会员等级的会员卡！</p>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Dialog } from 'vant'
import { getCardDetail, scanQrcodeCard, delCard, reqPostCardOrderRefund } from '@/api/user/member/memberApi'
import { scaleGoodsPrice } from '@/utils/index'
import { isWeixinCient } from '@/utils/validate'
import Store from '@/utils/store'
import small from '@/smallapp/small'
export default Vue.extend({
  name: 'index',
  components: {},
  data() {
    return {
      info: {},
      is_wx: '',
      shop_info: {
        avatar: '',
        title: ''
      },
      user: {
        nickname: '',
        mobile: '',
        create_time: ''
      },
      cardStyle: {
        backgroundImage: 'url(https://img.wifenxiao.com/h5-wfx/images/user/card/def_bg.png)',
        backgroundColor: 'initial',
        color: '#333'
      },
      cardShow: 1, // 切换会员卡正反面
      showUserDesc: false,
      showCert: false, // 显示会员凭证弹窗
      qrcode: '',
      txcode: '',
      showWxcodeImg: false, // 微信会员卡二维码弹窗
      wxcodeImg: '',
      cardId: '',
      pid:''
    }
  },
  methods: {
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    init() {
        this.pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'
      if (isWeixinCient()) {
        this.is_wx = 1
      }
      this.cardId = this.$route.query.id
      const params = {
        id: this.cardId
      }
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      getCardDetail(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.info = resData.info
          // console.log(this.info)
          this.shop_info = resData.shop_info
          this.user = resData.user
          if (this.info.cover) {
            if (this.info.cover_type == 2) {
              this.cardStyle.backgroundImage = 'url(' + this.info.cover + ')'
              this.cardStyle.backgroundColor = ''
            } else {
              this.cardStyle.backgroundImage = ''
              this.cardStyle.backgroundColor = this.info.cover
            }
          }

          this.cardStyle.color = resData.info.text_color

          const sid = this.$store.getters.sid || Store.fetchLocal('sid')
          if (wx.getExtConfigSync().appApiUrl) {
            this.qrcode = wx.getExtConfigSync().appApiUrl + '/Public/qrcode/sid/' + sid + '/text/' + this.info.card_no
            this.txcode = wx.getExtConfigSync().appApiUrl + '/Public/BarCode/sid/' + sid + '/text/' + this.info.card_no
          } else {
            this.qrcode = '/Public/qrcode/sid/' + sid + '/text/' + this.info.card_no
            this.txcode = '/Public/BarCode/sid/' + sid + '/text/' + this.info.card_no
          }

        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 小程序拨打电话
    makePhone(tel){
      wx.makePhoneCall({
        phoneNumber: tel
      })
    },
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    // 点击查看特权
    clickViewPrivilege() {
      this.cardShow = 2
    },
    // 关闭查看特权
    clickClosePrivilege() {
      this.cardShow = 1
    },
    // 点击使用须知
    clickUserDesc() {
      this.showUserDesc = !this.showUserDesc
    },
    // 点击出示会员凭证
    clickShowCert() {
      this.showCert = true
    },
    // 关闭会员凭证
    clickCloseCert() {
      this.showCert = false
    },
    /* // 领取会员卡
    clickReceiveCard() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      receiveCard().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.$Error('领取成功')
        } else {
          this.$Error(res.msg)
        }
        setTimeout(() => {
          this.init()
        }, 1000)
      })
    },
    // 激活会员卡
    clickActivationCard() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      activationCard().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          // console.log('激活')
        } else {
          this.$Error(res.msg)
        }
      })
    }, */
    // 点击领取微信会员卡
    clickScanQrcodeCard() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      scanQrcodeCard().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.wxcodeImg = res.data
          this.showWxcodeImg = true
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 删除会员卡
    clickDelCard() {
      let message = '删除会员卡不退款'
      // 购买的会员卡
      if (this.info.is_buy_log == 1) {
        message = '删除会员卡不退款'
      }
      Dialog.confirm({
        title: '确认删除会员卡？',
        message: message,
        className: 'common-confirm carddetail-delete',
        confirmButtonText:'确定',
        closeOnClickOverlay: true
      }).then(() => {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)

        delCard().then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error('删除成功')
          } else {
            this.$Error(res.msg)
          }
          setTimeout(() => {
            this.init()
          }, 1000)
        })
      }).catch(() => {
        // on cancel
      })
    },
    onViewRecordClick() {
      this.$JumpPath(this, 'card-record', {
        'card_order_id': this.info.card_order_id
      })
    },
    onViewRefundClick() {
      Dialog.confirm({
        // title: '标题',
        message: '确定退款？',
        className: 'common-confirm',
        closeOnClickOverlay: true
      }).then(() => {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)

        reqPostCardOrderRefund({
          'card_order_id': this.info.card_order_id
        }).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error(res.msg)
            setTimeout(() => {
              this.$router.go(-1)
            }, 2000)
          } else {
            this.$Error(res.msg)
          }
        })
      }).catch(() => {
        // on cancel
      })
    }
  },
  beforeCreate() {
    // $('body').addClass('bg_white')
    document.getElementsByTagName('body')[0].classList.add('bg_white')
  },
  destroyed() {
    // $('body').removeClass('bg_white')
     document.getElementsByTagName('body')[0].classList.remove('bg_white')
  },
  created() {
    this.init()
  },
  mounted() {
    // TODO 绑定手机号后重新加载
      window.$$subscribe("reloadCardDetail", () => {
        this.init();
      })
  }
})
</script>
<style lang="scss">
.van-dialog{
  &.common-confirm{
    &.carddetail-delete{
      .van-dialog__header{
        text-indent: 16px;
      }
      .van-dialog__message{
        padding:20px 48px 52px;
        font-size:28px;
        color:#999;
      }
    }
  }
}
</style>

<style lang="scss">
@import "../../../../styles/mixin";
.card-detail-container {
  .bg-qb {
    background-image: url("https://img.wifenxiao.com/h5-wfx/images/qiboy.png");
  }
  .card-container {
    background: #fff;
    padding: 25px;
    overflow: hidden;
  }
  //会员卡详情
  .card-region {
    height: 350px;
    color: #fff;
    border-radius: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    // transition:transform 3s;
    animation: rotateanimation 1s;
    @keyframes rotateanimation {
      0% {
        transform: rotate3d(0, 1, 0, 90deg);
      }
      100% {
        transform: rotate3d(0, 1, 0, 0deg);
      }
    }

    &.defalut-bg {
      background-image: url("https://img.wifenxiao.com/h5-wfx/images/user/card/def_bg.png");
    }
    &.card1 {
      padding: 40px;
    }
    &.card2 {
      padding: 30px;
      background-image: url("https://img.wifenxiao.com/h5-wfx/images/user/card/def_bg_back.png");
    }
    .card-header {
      position: relative;
      overflow: hidden;
      .shop-name {
        display: flex;
        font-size: 32px;
        align-items: center;
        justify-content: space-between;
        .shop-logo {
          width: 116px;
          height: 116px;
          display: inline-block;
          vertical-align: top;
          border-radius: 50%;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }
        .shop-name-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding-top: 10px;
          .shop-title,.member-id {
            padding: 0 16px;
            display: inline-block;
            font-weight: bold;
            @include lineClamp(36px, 48px, 1);
          }
          .member-id{
            font-size:24px;
            font-weight:normal;
          }
          .member-date {
            font-size: 24px;
            padding-left: 12px;
            // font-family: Microsoft YaHei;
            letter-spacing: 4px;
            margin-top: 8px;
          }
        }
      }
      .qr-code {
        width: 60px;
        height: 60px;
        margin-left: 40px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 60px;
        background-image: url("https://img.wifenxiao.com/h5-wfx/images/user/card/mrqr.png");
      }
    }
    .member-type-box {
      padding: 25px 0;
      .card-number {
        font-size: 52px;
        text-shadow: 4px 4px 12px #999;
        height: 66px;
        line-height: 66px;
      }
    }
    .card-content {
      display:flex;
      justify-content: space-between;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 75px;
      padding:0 30px 0 40px;
      // text-indent: 40px;
      line-height: 75px;
      background: rgba(255, 255, 255, 0.1);
      font-size: 26px;
    }
    .member-type {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 24px;
      font-weight: 500;
      background: rgba(255, 255, 255, 0.3);
      line-height: 50px;
      padding: 0 20px;
      border-radius: 0 20px 0 20px;
    }

    //  会员卡反面
    .myteq {
      border-bottom: 2px solid rgba(9, 10, 15, 0.2);
      font-size: 28px;
      color: #ffffff;
      padding-bottom: 30px;
      span {
        font-size: 28px;
      }
      .backBtn {
        img {
          width: 28px;
          height: 22px;
          vertical-align: 2px;
        }
        display: block;
        height: 40px;
        float: right;
      }
    }
    .membership {
      .discount {
        color: #f5d789;
        font-size: 80px;
        padding: 54px 0 0 60px;
        font-weight: bold;
        float: left;
        height: 180px;
        .discount-num {
          font-style: italic;
        }
        .txt {
          font-size: 32px;
          position: relative;
          top: -6px;
        }
      }
      .usr_card {
        color: #2d344d;
        font-size: 60px;
        padding-top: 68px;
        font-weight: bold;
        text-align: right;
        margin-right: 40px;
      }
    }
  }
}
//没有会员卡的时候
.emptyCard {
  position: relative;
  height: 540px;
  .receive_top {
    height: 80px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    line-height: 80px;
    padding-left: 20px;
    font-size: 28px;
    .receive_img {
      display: inline-block;
      width: 60px;
      height: 60px;
      background-repeat: no-repeat;
      background-size: 100%;
      vertical-align: middle;
      margin-right: 16px;
      border-radius: 50%;
    }
  }
  img {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
  }
  p {
    position: absolute;
    bottom: 60px;
    left: 50%;
    margin-left: -130px;
    font-size: 32px;
    color: #666;
  }
}

.user-area {
  padding: 10px 32px 20px;
  background-color: #fff;
  overflow: hidden;
  position: relative;
  h3,
  h4 {
    img {
      width: 28px;
      height: 28px;
      vertical-align: -7px;
    }
    font-size: 24px;
    line-height: 50px;
    color: #666666;
    width: 50%;
    float: left;
    span {
      letter-spacing: 2px;
    }
  }
}

.detail-block {
  border-top: 20px solid #f7f7f7;
  display: block;
  position: relative;
  background:#fff;
  overflow: hidden;
  font-size: 28px;
  .block-item {
    display: block;
    position: relative;
    overflow: hidden;
    line-height: 96px;
    padding: 0 30px;
    border-bottom: 2px solid #e5e5e5;
    color: #333;
    font-size: 28px;

    .icon-right {
      width: 18px;
      height: 18px;
      display: block;
      float: right;
      margin-top: 37px;
      margin-right: 0px;
      // background: url('https://img.wifenxiao.com/h5-wfx/images/user/card/icon-right.png') center/cover no-repeat;
    }
    &.active {
      .icon-right {
        transform: rotate(45deg);
      }
    }
    .user-desc {
      padding-bottom: 20px;
      word-wrap: break-word;
      color: #999;
      font-size: 24px;
      line-height: 45px;
    }
    .record-status {
      color: #ff0000;
      font-size: 24px
    }
  }
}

//点击要显示的弹层
.tc-content {
  width: 90%;
  background: transparent;
  .tc-top {
    line-height: 70px;
    font-size: 32px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background-color: #10ad61;
    padding-bottom: 14px;
    .tc-title {
      float: left;
      background-size: 60px;
      // height: 60px;
      line-height: 60px;
      margin-left: 40px;
      margin-top: 50px;
      font-size: 28px;
      color: #fff;
      .rank-box {
        float: left;
        span {
          display: block;
        }
      }
      .rank-title {
        line-height: 44px;
      }
      .rank-level {
        font-size: 44px;
      }
    }
    .tc-discount {
      position: absolute;
      color: #fff;
      right: 5%;
      top: 70px;
      padding: 0 0 0 40px;
      border-left: 2px solid #fff;
      h4 {
        font-size: 54px;
        span {
          font-size: 28px;
        }
      }
    }
    .del-btn {
      background-color: transparent;
      border: none;
      color: #fff;
      float: right;
      margin-top: 0;
      margin-right: 30px;
      font-size: 60px;
    }
    .header-img {
      width: 104px;
      height: 104px;
      display: inline-block;
      vertical-align: top;
      background-size: cover;
      border-radius: 50%;
      background-repeat: no-repeat;
      margin-right: 10px;
    }
  }
  .tc-imgBox {
    background-color: #fff;
    text-align: center;
    border-radius: 0 0 20px 20px;
    padding-bottom: 28px;
    .qrcode {
      width: 100%;
      img {
        width: 60%;
      }
    }
    .txcode {
      width: 100%;
      padding-bottom: 20px;
      img {
        width: 90%;
        height: 120px;
      }
    }
  }
  .tc-bottom {
    margin: 12px 0;
    color: #fff;
    text-align: center;
  }
}

//微信二维码弹窗
.wxcode-content {
  width: 85%;
  border-radius: 20px;
  .wxcode-img {
    width: 80%;
    margin: 0 auto;
    img {
      display: block;
      width: 100%;
    }
  }
}
.btn-group {
  background: #fff;
  padding: 50px 30px;
  a {
    &.btn-item {
      display: block;
      height: 96px;
      line-height: 96px;
      margin-right: 16px;
      border-radius: 48px;
      text-align: center;
      font-size: 32px;
      color: #fff;
      margin-bottom: 34px;
    }
  }
}
</style>
<style lang="scss">
// .discount {
//   .discount-num {
//     .price-scale {
//       font-family: initial;
//       color: #8d7a57;
//     }
//     .unit {
//       display: none;
//     }
//     .num-font {
//       font-size: 100px;
//       font-weight: bold;
//     }
//     .num-back {
//       font-size: 60px;
//       font-weight: bold;
//     }
//   }
// }
</style>